<template>
  <uni-list>
    <uni-list-item title="交易类型">
      <template #footer>
        <radio-group @change="onTypeChange">
          <label v-for="option in typeOptions" :key="option.value">
            <radio
              :value="option.value"
              :checked="model.type === option.value"
            ></radio>
            {{ option.text }}
          </label>
        </radio-group>
      </template>
    </uni-list-item>

    <uni-list-item title="交易地址" clickable @click="onChooseLocation">
      <template #footer>
        <view v-if="model.address">{{ model.address }}</view>
        <view v-else class="op">请选择</view>
      </template>
    </uni-list-item>

    <uni-list-item title="交易描述">
      <template #footer>
        <textarea
          v-model="model.message"
          type="text"
          placeholder="请输入交易描述"
          style="text-align: right; height: 100px"
        />
      </template>
    </uni-list-item>

    <uni-list-item title="联系方式">
      <template #footer>
        <input
          v-model="model.contact"
          type="number"
          maxlength="11"
          placeholder="请输入联系方式"
          style="text-align: right"
        />
      </template>
    </uni-list-item>
  </uni-list>

  <view class="confirm">
    <button @click="handleConfrim">确认发布</button>

    <!-- <button @click="fn1">测试</button> -->
  </view>
</template>

<script lang="ts" setup>
import { reactive, getCurrentInstance } from "vue";

const { ctx } = getCurrentInstance() as any;

// console.log("ctx", );

/** 交易类型选项 */
const typeOptions = [
  { value: "buy", text: "买" },
  { value: "sell", text: "卖" },
];

/** 表单数据 */
const model = reactive({
  type: "buy",
  address: "",
  lat: "",
  lng: "",
  message: "",
  contact: "",
});

/** 交易类型选择 */
const onTypeChange = (event: any) => {
  // console.log("onTypeChange", event);
  // 1. 获取当前勾选的 Radio 的 value
  const { value } = event.detail;
  // 2. 将 value 赋值给 model.type
  model.type = value;
};

/** 选择交易地址 */
const onChooseLocation = async () => {
  const location = await uni.chooseLocation();
  model.address = location.address;
  model.lat = "" + location.latitude;
  model.lng = "" + location.longitude;
};

/** 确认发布 */
const handleConfrim = () => {
  // 1. 做表单的校验
  if (!model.address) {
    return uni.showToast({ icon: "none", title: "请选择交易地址" });
  }

  if (!model.message) {
    return uni.showToast({ icon: "none", title: "请输入交易描述" });
  }

  if (!model.contact) {
    return uni.showToast({ icon: "none", title: "请输入联系方式" });
  }

  // 2. 调用接口
  uni
    .request({
      url: "http://127.0.0.1:3000/trades",
      method: "POST",
      data: model,
    })
    .then((response) => {
      // console.log("response", response);
      uni.showToast({ title: "发布成功" });

      setTimeout(() => {
        // 根据当前是否有历史记录，来控制是 后退 还是 重定向
        const pages = getCurrentPages();
        if (pages.length === 1) {
          // uni.redirectTo({ url: "/pages/info/info?id=1" });
          uni.redirectTo({ url: "/pages/index/index" });
        } else {
          // 获取到 eventChannel
          const eventChannel = ctx.getOpenerEventChannel();
          // 触发 上一个页面定义上的 refresh 时间
          eventChannel.emit("refresh");
          // 后退
          uni.navigateBack();
        }
      }, 1500);
    });
};
</script>

<style lang="scss">
.op {
  color: red;
}

.confirm {
  padding: 40rpx;
}
</style>
